<template>
  <div class="flex-wrap">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="90px"
      >
        <el-form-item label="字典名称：" prop="dictName">
          <el-input
            v-model="queryParams.dictName"
            placeholder="请输入字典名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="创建时间：" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="启用状态：" prop="status">
          <el-select
            v-model="queryParams.deleted"
            placeholder="请选择"
            clearable
            style="width: 180px"
          >
            <el-option
              v-for="item in sysNormalDisable.consts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><Search /></el-icon>查询
          </el-button>
          <el-button @click="resetQuery">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <section style="display: flex">
      <el-card class="table-card left" style="width: 240px">
        <div class="flexBetweenCenter" style="margin-bottom: 20px">
          <p>字典类型</p>
          <div class="flexBetweenCenter" style="width: 40px">
            <el-icon><Plus @click="openDict('add')" /></el-icon>
            <el-icon><Edit @click="openDict('edit')" /></el-icon>
          </div>
        </div>
        <p
          class="sidebar-item"
          :class="currentIndex === i ? 'active-item' : ''"
          v-for="(v, i) in typeList"
          :key="i"
          @click="currentIndex = i"
        >
          {{ v.dictName }}
        </p>
      </el-card>

      <el-card class="table-card" style="width: 100%">
        <template #header>
          <el-button type="info" @click="openOption('add')">新增选项</el-button>
        </template>
        <el-table v-loading="loading" :data="userList" border>
          <el-table-column
            label="序号"
            type="index"
            width="60"
            align="center"
          />
          <el-table-column label="字典名称" prop="dictLabel" />
          <el-table-column
            label="字典名称选项编码"
            prop="dictValue"
            align="center"
          />
          <el-table-column
            label="字典选项描述"
            prop="remark"
            align="center"
          />
          <el-table-column label="启用状态" prop="tokenAmount" align="center">
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                :disabled="true"
                active-value="0"
                inactive-value="1"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            width="160"
            align="center"
          />
          <el-table-column label="操作" width="100" align="center">
            <template #default="{ row }">
              <el-button link @click="openOption('edit', row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </section>

    <addAndEditDict
      v-if="addAndEditDictObject.show"
      :type="addAndEditDictObject.type"
      :item="addAndEditDictObject.item"
      @cancel="cancel"
    />
    <addAndEditOption
      v-if="addAndEditOptionObject.show"
      :type="addAndEditOptionObject.type"
      :item="addAndEditOptionObject.item"
      :typeList="typeList"
      @cancel="cancel"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import addAndEditDict from './components/addAndEditDict.vue';
import addAndEditOption from './components/addAndEditOption.vue';
import { getDictPage, getDictQeryDictType } from '@/api/system';

import { useDictStore } from '@/store/dict';

const dictStore = useDictStore();
const { sysNormalDisable } = dictStore;

// 字典类型索引
const typeList = reactive([]);
const currentIndex = ref(0);

const addAndEditDictObject = reactive({
  show: false,
  type: '',
});
const addAndEditOptionObject = reactive({
  show: false,
  type: '',
});

// 查询参数
const initValues = () => {
  return {
    pageNum: 1,
    pageSize: 10,
    dictName: '',
    createTime: [],
    lastLoginTime: [],
    memberType: '',
    status: '',
  };
};
let queryParams = reactive(initValues());

const loading = ref(false);
const userList = ref([]);
const total = ref(0);

const openDict = (type) => {
  addAndEditDictObject.type = type;
  addAndEditDictObject.show = true;
  addAndEditDictObject.item = typeList[currentIndex.value];
};

const openOption = (type, item = null) => {
  addAndEditOptionObject.type = type;
  addAndEditOptionObject.show = true;
  addAndEditOptionObject.item = item;
};
const cancel = (flag) => {
  if (flag) {
    getList();
    getDictType();
    ElMessage({
      type: 'success',
      message: '操作成功',
    });
  }
  addAndEditDictObject.show = false;
  addAndEditOptionObject.show = false;
};

// 查询用户列表
const getList = async () => {
  // 处理日期范围
  const params = { ...queryParams };
  if (params.createTime && params.createTime.length === 2) {
    params.createTimeBegin = params.createTime[0];
    params.createTimeEnd = params.createTime[1];
  }
  delete params.createTime;
  loading.value = true;
  getDictPage(params)
    .then(({ data }) => {
      total.value = data.total;
      userList.value = data.list;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 字典类型查询
const getDictType = () => {
  getDictQeryDictType().then(({ data }) => {
    Object.assign(typeList, data);
  });
};

// 处理查询
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置查询
const resetQuery = () => {
  Object.assign(queryParams, initValues());
  handleQuery();
};

// 处理分页大小变更
const handleSizeChange = (size) => {
  queryParams.pageSize = size;
  getList();
};

// 处理页码变更
const handleCurrentChange = (page) => {
  queryParams.pageNum = page;
  getList();
};

// 初始加载数据
onMounted(() => {
  getList();
  getDictType();
});
</script>

<style lang="less" scoped>
.search-card,
.table-card {
  margin-bottom: 20px;

  .el-card__header {
    padding: 15px 20px;
  }
}
.left :deep(.el-card__body) {
  padding: 10px;
}

.sidebar-item {
  padding: 12px 4px;
  font-size: 14px;
  border-bottom: 2px solid #ededed;
  cursor: pointer;
}
.active-item {
  background: #d7d7d7;
}
.el-icon {
  cursor: pointer;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.text-muted {
  font-size: 13px;
  color: #909399;
  margin-top: 5px;
}
</style>
